<template>
  <div class="vivid-skeleton" :style="{ width: width }">
    <!-- 单个骨架屏项 -->
    <template v-if="!rows">
      <div class="vivid-skeleton__item" :class="[`vivid-skeleton__${variant}`]" :style="getItemStyle"></div>
    </template>

    <!-- 多行骨架屏 -->
    <template v-else>
      <div v-for="(row, index) in rowArray" :key="index" class="vivid-skeleton__row">
        <div class="vivid-skeleton__item" :class="[`vivid-skeleton__${variant}`]" :style="getRowStyle(row, index)">
        </div>
      </div>
    </template>

    <!-- 动画效果 -->
    <div v-if="animated" class="vivid-skeleton__animated"></div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ViSkeleton',
  props: {
    // 骨架屏类型：text/circle/rect
    variant: {
      type: String,
      default: 'text',
      validator: (value: string) => ['text', 'circle', 'rect', 'image'].includes(value)
    },
    // 宽度
    width: {
      type: String,
      default: '100%'
    },
    // 高度
    height: {
      type: String,
      default: null
    },
    // 是否显示动画
    animated: {
      type: Boolean,
      default: true
    },
    // 行数（多行模式）
    rows: {
      type: [Number, String],
      default: 0
    },
    // 行高（多行模式）
    rowHeight: {
      type: [String, Number],
      default: '16px'
    },
    // 行间距（多行模式）
    rowSpacing: {
      type: [String, Number],
      default: '12px'
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,
      default: true
    },
    // 最后一行的宽度（可选）
    lastRowWidth: {
      type: String,
      default: ''
    }
  },
  computed: {
    rowArray() {
      const count = parseInt(String(this.rows)) || 0
      return Array.from({ length: count })
    },
    getItemStyle() {
      return {
        height: this.height || (this.variant === 'circle' ? this.width : '16px'),
        borderRadius: this.variant === 'circle' ? '50%' : '4px'
      }
    }
  },
  methods: {
    getRowStyle(_row, index: number) {
      const isLast = index === this.rowArray.length - 1
      const width = isLast && this.lastRowWidth ? this.lastRowWidth : '100%'

      return {
        width,
        height: this.rowHeight,
        marginBottom: index < this.rowArray.length - 1 ? this.rowSpacing : 0,
        borderRadius: '4px'
      }
    }
  }
}
</script>

<style scoped>
.vivid-skeleton {
  position: relative;
  overflow: hidden;
}

.vivid-skeleton__item {
  background: #f2f2f2;
  display: inline-block;
}

.vivid-skeleton__text {
  width: 100%;
}

.vivid-skeleton__circle {
  aspect-ratio: 1/1;
}

.vivid-skeleton__rect {
  width: 100%;
}

.vivid-skeleton__image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
}

/* 动画效果 */
.vivid-skeleton__animated {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: vivid-skeleton-shimmer 1.5s infinite;
}

@keyframes vivid-skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
</style>
